<template>
  <div>
    <!-- <h1>分类列表</h1> -->
    <el-table :data="items">
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column prop="_id" label="数据库id" width="120px" ></el-table-column>

      <el-table-column prop="avatar" label="头像">
        <template slot-scope="scope">
          <img :src="scope.row.avatar" alt="头像" height="75px" />
        </template>
      </el-table-column>

      <el-table-column prop="name" label="英雄名称"></el-table-column>
      <el-table-column prop="title" label="英雄称号"></el-table-column>
      <el-table-column prop="scores.difficult" label="难度"></el-table-column>

      <el-table-column label="技能名称">
        <template slot-scope="scope">
          <el-dropdown>
            <span class="el-dropdown-link">
                技能
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in scope.row.skills" :key="item._id">{{item.name}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>

      <el-table-column label="顺风出装">
        <template slot-scope="scope">
          <el-dropdown>
            <span class="el-dropdown-link">
                输出装备
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in scope.row.items1" :key="item._id">{{item.name}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>

      <el-table-column label="逆风出装" style="text-align: center">
        <template slot-scope="scope">
          <el-dropdown>
            <span class="el-dropdown-link">
              防守装备
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in scope.row.items1" :key="item._id">{{item.name}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>

      <el-table-column id="edit-box" label="操作">
        <template slot-scope="scope">
          <el-button
            id="btn-edit"
            size="mini"
            icon="el-icon-edit"
            type="primary"
            @click="$router.push(`/heroes/edit/${scope.row._id}`)"
          >更多</el-button>
          <el-button
            size="mini"
            icon="el-icon-delete"
            type="danger"
            @click="remove(scope.row)"
            style="margin:5px 0 0 0"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    };
  },
  created() {
    this.fetch();
  },
  methods: {
    async fetch() {
      const response = await this.$http.get("rest/heroes");
      this.items = response.data;
      console.log(this.items);
    },
    async remove(row) {
      this.$confirm(`是否删除?"${row.name}" `, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        await this.$http.delete(`rest/heroes/${row._id}`);
        this.$message({
          type: "success",
          message: "删除成功!"
        });

        this.fetch();
      });
    }
  }
};
</script>

<style scoped>
/* 编辑按钮 */
#btn-edit {
  margin-right: 10px !important;
}
.el-dropdown-link {
  cursor: pointer;
}
.el-icon-arrow-down {
  font-size: 12px;
  
}
</style>